<template>
  <div style="margin-bottom: 20px;">
    <el-table
      stripe
      :data="tData"
      :height="zyTableHeight"
      :class="zyTableClass"
      :ref="zyTableRef"
      :border="zyBorder"
      :highlight-current-row="zyTableSelectType==='radio'"
      :row-key="getRowKey"
      @select="tableSelect"
      @select-all="tableSelect"
      @cell-click="cellClick"
      :size="GlobalVar.sizeSet.table"
    >
      <slot name="expand" />
      <el-table-column v-if="zyTableSelectType==='checkbox'" type="selection" width="55"></el-table-column>
      <el-table-column
        :width="indexWidth+'px'"
        type="index"
        label="序号"
        :index="(index)=>{return (index+1) + (query.page-1)*query.pageSize}"
      ></el-table-column>
      <slot />
      <slot name="last" />
    </el-table>

    <div class="pagination" v-if="zyPage">
      <el-pagination
        small
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="pagesizes"
        :pager-count="5"
        :page-size="query.pageSize"
        :layout="zyLayout"
        :total="query.total"
      ></el-pagination>
              <!-- :pager-count="zyPagerCount" -->
    </div>
  </div>
</template>

<script>
export default {
  name: "ZycmTable",
  data() {
    return {
      // ZYCMlayout:"prev, pager, next, total,jumper,sizes",
      pagesizes: [5, 10, 20, 50, 100],
      query: { page: 1, pageSize: this.GlobalVar.query.pageSize, total: 0 },
      tData: [],
      formData: new FormData(),
      currentIndex: "",
      indexWidth: "",
    };
  },
  props: {
    zyFirstPage: {
      //是否第一页数据  否则是当页
      type: Boolean,
      default: true,
    },
    zyLayout: {
      //分页组件布局
      type: String,
      default: "prev, pager, next, total,jumper,sizes",
    },
    zyPagerCount: {
      //显示的页码 有效值为大于5的数值 反之不受限
      type: Number,
      //default:5,
      validator: function (val) {
        if (val && val * 1 < 3) {
          return false;
        }
        return true;
      },
    },
    zyTableRef: {
      //table的ref值
      type: String,
      required: true,
    },
    zyTableData: {
      //table的数据
      /*  type:Array,
            validator(val){
                return true;
            } */
    },
    zyTableHeight: {
      //table高度
      type: String,
    },
    zyTableClass: {
      //table的自定义class
      type: String,
    },
    zyTableSelectType: {
      //不给值不用显示选择框 checkbox表示多选 radio单选
      type: String,
    },
    zyPage: {
      //分页是否显示  默认显示
      type: Boolean,
      default: true,
    },
    zyBorder: {
      //是否表格加边框
      type: Boolean,
      default: false,
    },
    zyFrontAutoPage: {
      //是否由前端自动分页 一般是接口返回的所有数据需要前端做分页显示
      type: Boolean,
      default: false,
    },
    zyRowKey: {
      //点击展开详情时 此属性必须传 否则展开一个会触发全部展开
      type: String,
    },
  },
  created() {
    //创建组件时 自动加载数据
    this.formData.set("zycmToken", window.sessionStorage.getItem("token"));
    if (this.zyPage) {
      this.formData.set("page", this.query.page);
      this.formData.set("pageSize", this.query.pageSize);
    }
    //调用父组件的加载数据初始化
    //this.$emit("loadData",this.formData,this.tableRef);
  },
  computed: {
    /*    getData:function(){
            if(this.zyTableData && this.zyTableData.length > 0){
                for(let key in this.zyTableData){
                    if(this.zyTableData[key].ref === this.zyTableRef){
                        this.currentIndex = key;
                        if(this.zyTableData[key].isReqData){
                            if(this.zyTableSelectType === "radio"){
                                this.$refs[this.zyTableRef].setCurrentRow();//清空单选样式
                            }

                            //外部刷新数据时 需核对页码 不是分页格式数据的还是用原来的页码 界面自动分页的除外
                            if(!this.zyFrontAutoPage){
                                this.query.page = this.zyTableData[key].page || this.query.page;
                            }

                            this.query.total = this.zyTableData[key].total || 0;
                            this.tData = this.getTableData(this.zyTableData[key]);


                            //处理table展示的数据条数与分页的条数不一致的情况 一般是接口返回的所有数据需要前端做分页显示
                            if(this.zyFrontAutoPage){
                                if(this.zyPage){
                                    this.query.page= this.query.page || 1;
                                    this.query.total=this.tData.length;
                                    this.tData = this.tData.slice((this.query.page - 1) * this.query.pageSize,this.query.page * this.query.pageSize);
                                }
                            }
                        }else{
                            //处理一种清空数据的列表情况  可能不在isReqData=true范围内 属于2个或多个table需同时起效果的情景
                            this.tData = this.getTableData(this.zyTableData[key]);

                            //如果有数据为空了 同时变更页码总数
                            if(this.tData.length == 0){
                                this.query.page=1;
                                this.query.total=0;
                            }
                        }

                        break;
                    }

                }
                return this.tData;
            }

            //console.log("无需处理数据"+this.zyTableRef);
            return [];
        } */
  },
  watch: {
    //监听数据变化
    zyTableData(ndata, odata) {
      if (this.zyTableData && this.zyTableData.length > 0) {
        for (let key in this.zyTableData) {
          if (this.zyTableData[key].ref === this.zyTableRef) {
            this.currentIndex = key;
            if (this.zyTableData[key].isReqData) {
              //console.log("更新table的ref为" + this.zyTableRef + "数据");
              if (this.zyTableSelectType === "radio") {
                this.$refs[this.zyTableRef].setCurrentRow(); //清空单选样式
              }

              //外部刷新数据时 需核对页码 不是分页格式数据的还是用原来的页码 界面自动分页的除外
              if (!this.zyFrontAutoPage) {
                this.query.page = this.zyTableData[key].page || this.query.page;
                this.query.pageSize = this.zyTableData[key].pageSize || this.query.pageSize;
              }

              this.query.total = this.zyTableData[key].total || 0;
              this.tData = this.getTableData(this.zyTableData[key]);

              //处理table展示的数据条数与分页的条数不一致的情况 一般是接口返回的所有数据需要前端做分页显示
              if (this.zyFrontAutoPage) {
                if (this.zyPage) {
                  this.query.page = this.query.page || 1;
                  this.query.total = this.tData.length;
                  this.tData = this.tData.slice(
                    (this.query.page - 1) * this.query.pageSize,
                    this.query.page * this.query.pageSize
                  );
                }
              }
               if (this.query.total > 99999) {
                this.indexWidth = 90;
              } else if (this.query.total > 9999) {
                this.indexWidth = 70;
              } else if (this.query.total > 1000) {
                this.indexWidth = 60;
              } else {
                this.indexWidth = 50;
              }
            } else {
              //处理一种清空数据的列表情况  可能不在isReqData=true范围内 属于2个或多个table需同时起效果的情景
              this.tData = this.getTableData(this.zyTableData[key]);

              //如果有数据为空了 同时变更页码总数
              if (this.tData.length == 0) {
                this.query.page = 1;
                this.query.total = 0;
              }
            }

            return;
          }
        }
        //return this.tData;
      }

      //console.log("无需处理数据" + this.zyTableRef);
      return (this.tData = []);
    },
  },
  methods:{
    handleSizeChange(val){
            this.query.page = 1;
            this.query.pageSize = val;
            this.formData.set("pageSize", this.query.pageSize);
            this.formData.set("page", this.query.page);
            if(this.query.total === 0){//没有数据的不用再去请求
                return;
            }
            if(this.zyFrontAutoPage){
                if(this.zyPage){
                    this.query.page = 1;
                    let tdata = this.getTableData(this.zyTableData[this.currentIndex]);
                    this.tData = tdata.slice((this.query.page - 1) * this.query.pageSize,this.query.page * this.query.pageSize);
                }
                //自动分页的 如果是多选或单选 需要清空数据
                if(this.zyTableSelectType === "checkbox"){
                    this.$refs[this.zyTableRef].clearSelection();//清空多选
                }else if(this.zyTableSelectType === "radio"){
                    this.$refs[this.zyTableRef].setCurrentRow();//清空单选样式
                }
                this.$emit("zyCleanSelectedToAutoPage",this.zyTableRef);
                return;
            }
            this.$emit("zyLoadData",this.formData,this.zyTableRef);
            //判断父组件是否创建了回调函数 如果没有不触发父组件的刷新
            /* if(this.$listeners['publicHandleSizeAndPageChange']){
                this.$emit('publicHandleSizeAndPageChange','pageSizeChange', this.tableRef);
            } */
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.formData.set("page", this.query.page);
      this.formData.set("pageSize", this.query.pageSize);
      if (this.zyFrontAutoPage) {
        if (this.zyPage) {
          let tdata = this.getTableData(this.zyTableData[this.currentIndex]);
          this.tData = tdata.slice(
            (this.query.page - 1) * this.query.pageSize,
            this.query.page * this.query.pageSize
          );
        }
        //自动分页的 如果是多选或单选 需要清空数据
        if (this.zyTableSelectType === "checkbox") {
          this.$refs[this.zyTableRef].clearSelection(); //清空多选
        } else if (this.zyTableSelectType === "radio") {
          this.$refs[this.zyTableRef].setCurrentRow(); //清空单选样式
        }
        this.$emit("zyCleanSelectedToAutoPage", this.zyTableRef);
        return;
      }
      this.$emit("zyLoadData", this.formData, this.zyTableRef);
      //判断父组件是否创建了回调函数 如果没有不触发父组件的刷新
      /*  if(this.$listeners['publicHandleSizeAndPageChange']){
                this.$emit('publicHandleSizeAndPageChange', 'pageChange',this.tableRef);
            } */
    },
    tableSelect(selection, row) {
      /*  if(row){//单个选择

            }else{//全选

            } */
      this.$emit("zyTableSelect", selection, row, this.zyTableRef);
    },
    cellClick(row, column, cell, event) {
      //单元格事件包含行点击事件
      //console.log("点击列" + this.zyTableRef);
      //过滤掉与行点击事件冲突的列
      if (cell.className.search("stopRowClick") >= 0) return;

      this.$emit("zyCellClick", row, column, cell, event, this.zyTableRef);
      if (this.zyRowKey) this.$refs[this.zyTableRef].toggleRowExpansion(row);

      //判断父组件是否创建了回调函数 如果没有不触发父组件的刷新
      /*  if(this.$listeners['publicCellClick']){
                this.$emit('publicCellClick', this.zyTableRef,row, column, cell, event);
            } */
    },
    getTableData(data) {
      if (data) {
        if (data.dataList) {
          return data.dataList;
        }
        if (data.data) {
          return data.data;
        }
        return [];
      }
    },
    getRowKey(row, a) {
      if (this.zyRowKey) {
        return row[this.zyRowKey];
      }
      return row["id"];
    }
  }
}

</script>

<style lang="stylus" scoped>
/deep/.el-pagination{
  padding: 10px 5px 10px;
}
/deep/.el-pagination__sizes{
  .el-input__inner{
    height: 22px;
  }
}
</style>
